<template>
	<view class="details-shop">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title" :share="false"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->

		<!-- 套餐 -->
		<view v-if="login">
			<view class="meal padd_32">
				<!-- banner -->
				<swiper class="swiper" indicator-dots="true" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#fff" autoplay="true" interval="5000" circular="true">
					<swiper-item v-for="(img, index) in detail.images" :key="index+'image'">
						<image :src="img.imageUrl" mode="widthFix"></image>
					</swiper-item>
					<swiper-item v-if="detail.images.length==0">
						<image v-if="detail.shopInfo.portrait" :src="detail.shopInfo.portrait" mode="widthFix"></image>
						<image v-else src="../../static/images/img_null.png" mode="widthFix"></image>
					</swiper-item>
				</swiper>
				<!-- 详情 -->
				<view class="details">
					<view class="title">{{detail.shopInfo.name}}</view>
					<uni-rate v-if="detail.shopInfo.score>=0" active-color="#FCC800" max="5" is-fill="false" size="11" disabled="true" :value="detail.shopInfo.score"></uni-rate>
					<view class="cont">
					{{detail.shopInfo.description||''}}
					</view>
					<view class="address">
						<image src="../../static/images/middle_icon_location@2x.png" mode="widthFix"></image>
						{{detail.shopInfo.province||''}}{{detail.shopInfo.city||''}}{{detail.shopInfo.region||''}}{{detail.shopInfo.address||''}}
					</view>
					<!-- 业务 -->
				<!-- 	<view class="selected">
						<scroll-view scroll-x="true">
							<view class="cont" v-for="(item, index) in detail.entBizs" :key="index+'a'">
								<image :src="item.business.icon" mode="aspectFill"></image>
								<view class="title">{{item.business.name}}</view>
								<view class="dis">{{item.business.description}}</view>
								<view class="clearfix">
									<text class="fl">{{item.univalence}}{{item.univalenceUnit}}</text>
									<view class="fr" @click="toOrder(index)">去下单</view>
								</view>
							</view>
						</scroll-view>
					</view> -->
				</view>
				<!-- 套餐列表 -->
				<view class="list" v-if="detail.pkgs.length != 0">
					<view class="title">套餐列表</view>
					<meal-list :list="detail.pkgs" :details="details"></meal-list>
				</view>
				<!-- 员工列表 -->
				<view class="list" v-if="detail.employees.length != 0">
					<view class="title">员工列表</view>
					<staff-list :state="state" :id="id" :list="detail.employees"></staff-list>
					<navigator class="more" :url="'/pages/list/staff?id=' + detail.shopInfo.id">查看全部员工》</navigator>
				</view>
				<!-- 评价列表 -->
				<view class="list" v-if="detail.appraises && detail.appraises.length != 0">
					<view class="title">用户评价</view>
					<comment-list :list="detail.appraises"></comment-list>
					<navigator class="more" :url="'/pages/details/evaluate?type=商家&sid=' + detail.shopInfo.id">查看全部评价》</navigator>
				</view>
			</view>
			<!-- end -->
			
			<!-- nav -->
			<view class="hei-156"></view>
			<details-footer :shop="shop" :id='id' :nat = 'detail' :send="childByValue"></details-footer>
		</view>
		<!-- end -->
		<view class="nologin" v-else>
			<image src="../../static/images/middle_image@2x.png" mode="widthFix"></image>
			<view>您还未登录，无法查看订单</view>
			<navigator url="/pages/register/login">去登陆</navigator>
		</view>
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue'
import DetailsFooter from '@/components/DetailsFooter.vue';
import UniRate from '@/components/uni-rate/uni-rate.vue'
import StaffList from '@/components/list/list-staff.vue'
import MealList from '@/components/list/list-meal.vue'
import CommentList from '@/components/list/list-comment.vue'
import { mapState, mapMutations } from 'vuex';
import app from "@/App.vue"
export default {
	computed: mapState(['hasLogin', 'uerInfo']),
	components: {
		PublicHeader,
		UniRate,
		StaffList,
		MealList,
		CommentList,
		DetailsFooter
	},
	data() {
		return {
			sid : '',
			id : '',
			login: true,
			title: '商家详情',
			share: true,
			state:true,
			details:true,
			shop:true,
			goods: [0], //列表数据
			detail:{
				appraises: [],
				employees: [],
				entBizs: [],
				images: [],
				pkgs: [],
				shopInfo: {
					account: '',
					address: '',
					city: '',
					contactsName: '',
					contactsPhone: '',
					description: '',
					endTime: '',
					id: '',
					juridicalPerson: '',
					juridicalPersonIdcard: '',
					juridicalPersonIdcardBackUrl: '',
					juridicalPersonIdcardFrontUrl: '',
					licenseUrl: '',
					name: '',
					parentId: '',
					portrait: '-',
					primaryBusinessTypeId: '',
					primaryBusinessTypeName: '',
					province: '',
					region: '',
					score: -1,
					startTime: '',
					statusId: '',
					statusName: '',
					typeId: '',
					typeName: ''
				}
			}
		}
	},
	onLoad(option){
		console.log(option,"option")
		if (option && option.sid) {
			this.sid = option.sid
		} else if (app.globalData.query.sid) {
			this.sid = app.globalData.query.sid
		}
		if (option && option.id) {
			this.id = option.id
		}
		var _this = this
		if (_this.uerInfo.userId == '') {
			uni.navigateTo({
				url:"/pages/register/login"
			})
		}
		_this.$http
			.post('/ent/manage/query/detail',{
				shopId: _this.sid,
				userId: _this.uerInfo.userId,
				role: 'ur'
			})
			.then(function(response) {
				if (response.success) {
					_this.detail = response.data
				} else {
					_this.login = false
				}
			})
			.catch(function(error) {
				console.log(error);
			});
	},
	// #ifdef MP-WEIXIN
	onShareAppMessage(res) {
		let _this = this
		 if (res.from === 'button') {// 来自页面内分享按钮
		   console.log(res.target)
		 }
		 console.log('分享数据',res)
		 // uni.showToast({
			// icon: 'none',
			// position: 'bottom',
			// title: '分享成功'
		 // })
		 return {
		   title: 'Bee到商家分享',
		   path: '/pages/details/details-shop?sid=' + _this.sid,
		   imageUrl: '/static/images/img_0.png'
		 }
	 },
	onShareTimeline(res) {
		let _this = this
		if (res.from === 'menu') {// 来自页面内分享按钮
		  console.log(res.target)
		}
		console.log('分享朋友圈进来的',res)
		uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '分享成功'
		})
		return {
		  title: 'Bee到商家分享',
		   path: '/pages/details/details-shop?sid=' + _this.sid,
		  imageUrl: '/static/images/img_0.png'
		}
	},
	  // #endif
	methods: {
		toOrder(index) {
			console.log(this.detail.employees)
			let query = {
				nat: {
					shopId: this.detail.shopInfo.id
				},
				entBizs:this.detail.entBizs[index]
			}
			uni.navigateTo({
				url: '/pageageA/pages/order/details-business?query=' + JSON.stringify(query)
			})
		},
		childByValue(e) {
			this.detail.focused = e
		   }
	}
};
</script>

<style scoped lang="scss">
	/* banner */
	swiper{
		height: 260rpx;
		// height: 246rpx;
		margin-top: 10rpx;
		margin-bottom: 32rpx;
	}
	swiper image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	/* 详情 */
	.details .title{
		font-size: 32rpx;
		color: #333;
		line-height: 45rpx;
		margin-bottom: 24rpx;
	}
	.details .cont{
		font-size: 26rpx;
		color: #666;
		font-size: 26rpx;
		letter-spacing: 0.65rpx;
		line-height: 37rpx;
		margin-top: 14rpx;
		margin-bottom: 10rpx;
	}
	.details .address{
		position: relative;
		font-size: 24rpx;
		color: #999;
		line-height: 33rpx;
		letter-spacing: 0.6rpx;
		padding-left: 30rpx;
		margin-bottom: 46rpx;
	}
	.details .address image{
		position: absolute;
		width: 21rpx;
		left: 0;
		top: 6rpx;
	}
	/* 列表 */
	.list{
		margin-bottom: 46rpx;
	}
	.list .title{
		height: 36rpx;
		line-height: 36rpx !important;
		font-size: 32rpx;
		color: #333;
		line-height: 45rpx;
		font-weight: 500;
		border-left: 6rpx solid $uni-color1;
		padding-left: 10rpx;
		margin-bottom: 24rpx;
	}
	.list .more{
		width: 100%;
		text-align: center;
		padding-top: 20rpx;
		font-size: 26rpx;
		color: #333;
	}
	.hei-156{
		height: 156rpx;
	}
	.selected {
		/* padding-left: 32rpx; */
	}
	.selected scroll-view {
		width: 100%;
		height: 360rpx;
		display: flex;
		white-space: nowrap;
	}
	.selected .cont {
		width: 250rpx;
		height: 284rpx;
		padding: 16rpx 20rpx;
		/* background: #f2f4f5; */
		border-radius: 10rpx;
		margin-right: 16rpx;
		position: relative;
		margin-right: 16rpx;
		display: inline-block;
		box-shadow:0px 16px 36px 0px rgba(0,0,0,0.04);
	}
	.selected .cont image{
		width: 230rpx;
		height: 126rpx;
	}
	.selected .cont .title{
		color: #333;
		font-size: 26rpx;
		font-weight: 500;
		letter-spacing: 0.65rpx;
		line-height: 44rpx;
		margin-bottom: 0;
	}
	.selected .cont .dis{
		width: 100%;
		color: #999;
		font-size: 24rpx;
		min-height: 66rpx;
		line-height: 33rpx;
		overflow: hidden;
		white-space: initial;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.selected .cont .clearfix{
		min-width: 280rpx;
		font-size: 26rpx;
		color: #ff0000;
		margin-top: 6rpx;
	}
	.selected .cont .clearfix .fr{
		margin-right: 10rpx;
		color: $uni-color1;
	}
	.nologin {
		width: 100%;
	}
	.nologin image {
		width: 500rpx;
		display: block;
		margin: 0 auto;
		margin-top: 178rpx;
	}
	.nologin view {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		margin-top: 25rpx;
	}
	.nologin navigator {
		width: 412rpx;
		height: 90rpx;
		background-color: $uni-color1;
		line-height: 90rpx;
		color: #fff;
		font-size: 36rpx;
		text-align: center;
		border-radius: 45rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
</style>
